<template>
  	<div id="myCollect">
  		<header>
  			<i @click="goBack()"></i>
  			<div>视频收藏</div>
  		</header>
		<ul class="list">
			<div class='mc' v-if="list.length<1">
  				<p>暂无收藏!</p>
	  		</div>
	  		<Loadmore
				:bottom-method="loadBottom"
                :bottom-all-loaded="allLoaded"
                ref="loadmore"
                :autoFill="false"
			>
			<li v-for="(item,index) in list" :key='index' v-if="list.length>0">
				<router-link :to="{name: 'homeDetail',query: {id: item.id,type:'collect'}}">
	  				<img :src="item.course_pic" width="77" height="77" style="margin-left: 0.1rem"/>
	  				<div>
	  					<div>
		  					<h3>{{item.course_name}}</h3>
	  					</div>
	  					<p>主讲老师:{{item.teacher_name}}</p>
	  					<span style="color:#dddddd">
	  						{{item.program}}
	  					</span>
	  				</div>
  				</router-link>
			</li>
			</Loadmore>
		</ul>
	</div>
</template>
<script>
	import {Loadmore} from 'mint-ui';
	export default {
		data() {
			return {
                list: [],
				userid: '',
				sentPage: {
					page: 1,
					rows: 10
				},
				allLoaded: false,
				totalNum: 0, 	//总数据条数
			}
		},
		components: {
			Loadmore
		},
		methods: {
			goBack() {
				this.$router.push({path:'/my'})
			},
			//获取收藏课程列表
            getCollectCourse(params) {
                this.userid = localStorage.getItem("loginMobile");
                // 第一个参数是root--baseurl
                this.$api.post(this.$api.baseURLSchool,"getUserAll/"+this.userid+"/collect",params,r => {
                    this.totalNum = r.data.records;
					if(this.sentPage.page==1) {
						this.list = r.data.info;
					}else {
						this.list = this.list.concat(r.data.info);
					}
					if(r.data.info.length == 0) {
						this.$utils._toast("暂无更多数据");
                    }
                    if (r.data.ret == -3) {
              localStorage.clear();
              this.isLogin()
            }
                },err => {
                    console.log(err);
                })
            },
                 // 登录拦截
       isLogin() {
        this.userid = localStorage.getItem("loginMobile");
        if (!this.userid) {
          this.$router.push('/login1')
          return false;
        } else {
          return true;
        }
      },
			//上拉加载
			loadBottom() {
				(this.sentPage.page)++;
		        setTimeout(() => {
		        	this.getCollectCourse(this.sentPage);
		        }, 20);
		        if(this.totalNum == this.list.length) {
					this.allLoaded = true;
		        }
				this.$refs.loadmore.onBottomLoaded();
			}

		},
		computed: {
		},
		created() {
			this.getCollectCourse(this.sentPage);
		}
	}
</script>
<style lang="scss" scoped>
	.mc {
		padding: 40px 0;
		margin: auto;
		position: absolute;
		left: 50%;
		top: 40%;
		transform: translate(-50%,-50%);
		img {
			display: block;
			margin: 0 auto;
		}
		p {
			padding-top: 10px;
			text-align: center;
		}
	}
</style>
